<html><head><meta charset="utf-8"><title>06 基础概念和常见配置项介绍（二）-慕课专栏</title>
			<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
			<meta name="renderer" content="webkit">
			<meta property="qc:admins" content="77103107776157736375">
			<meta property="wb:webmaster" content="c4f857219bfae3cb">
			<meta http-equiv="Access-Control-Allow-Origin" content="*">
			<meta http-equiv="Cache-Control" content="no-transform ">
			<meta http-equiv="Cache-Control" content="no-siteapp">
			<link rel="apple-touch-icon" sizes="76x76" href="https://www.imooc.com/static/img/common/touch-icon-ipad.png">
			<link rel="apple-touch-icon" sizes="120x120" href="https://www.imooc.com/static/img/common/touch-icon-iphone-retina.png">
			<link rel="apple-touch-icon" sizes="152x152" href="https://www.imooc.com/static/img/common/touch-icon-ipad-retina.png">
			<link href="https://moco.imooc.com/captcha/style/captcha.min.css" rel="stylesheet">
			<link rel="stylesheet" href="https://www.imooc.com/static/moco/v1.0/dist/css/moco.min.css?t=201907021539" type="text/css">
			<link rel="stylesheet" href="https://www.imooc.com/static/lib/swiper/swiper-3.4.2.min.css?t=201907021539">
			<link rel="stylesheet" href="https://static.mukewang.com/static/css/??base.css,common/common-less.css?t=2.5,column/zhuanlanChapter-less.css?t=2.5,course/inc/course_tipoff-less.css?t=2.5?v=201907051055" type="text/css">
			<link charset="utf-8" rel="stylesheet" href="https://www.imooc.com/static/lib/ueditor/themes/imooc/css/ueditor.css?v=201907021539"><link rel="stylesheet" href="https://www.imooc.com/static/lib/baiduShare/api/css/share_style0_16.css?v=6aba13f0.css"></head>
			<body><div id="main">

<div class="container clearfix" id="top" style="display: block; width: 1134px;">
    
    <div class="center_con js-center_con l" style="width: 1134px;">
        <div class="article-con">
                            <!-- 买过的阅读 -->
                <div class="map">
                    <a href="/read" target="_blank"><i class="imv2-feather-o"></i></a>
                    <a href="/read/29" target="_blank">Webpack 从零入门到工程化实战</a>
                    <a href="" target="_blank">
                        <span>
                            / 1-6 06 基础概念和常见配置项介绍（二）
                        </span>
                    </a>
                </div>

            


            <div class="art-title" style="margin-top: 0px;">
                06 基础概念和常见配置项介绍（二）
            </div>
            <div class="art-info">
                
                <span>
                    更新时间：2019-06-21 09:49:42
                </span>
            </div>
            <div class="art-top">
                                <img src="https://img1.mukewang.com/5cd963070001e50a06400360.jpg" alt="">
                                                <div class="famous-word-box">
                    <img src="https://www.imooc.com/static/img/column/bg-l.png" alt="" class="bg1 bg">
                    <img src="https://www.imooc.com/static/img/column/bg-r.png" alt="" class="bg2 bg">
                    <div class="famous-word">构成我们学习最大障碍的是已知的东西，而不是未知的东西。 <p class="author">—— 贝尔纳</p></div>
                </div>
                            </div>
            <div class="art-content js-lookimg">
                <div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">除了上篇介绍的的跟 entry 和 output 相关的配置之外，本文将继续介绍 Webpack 其他重要配置。</p>
</div><div class="cl-preview-section"><h2 id="resolve" style="font-size: 30px;">resolve</h2>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">Webpack 进行构建的时候会从入口文件开始（entry）遍历寻找各个模块的依赖，resolve 配置是帮助 Webpack 查找依赖模块的，通过 resolve 的配置，可以帮助 Webpack 快速查找依赖，也可以替换对应的依赖（比如开发环境用 dev 版本的 lib 等）。resolve 的基本配置语法如下：</p>
</div><div class="cl-preview-section"><pre class="  language-js"><code class="prism  language-js">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
    resolve<span class="token punctuation">:</span> <span class="token punctuation">{</span>
        <span class="token comment">// resolve的配置</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">下面来介绍下常用的 resolve 配置。</p>
</div><div class="cl-preview-section"><h3 id="resolve.extensions">resolve.extensions</h3>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;"><code>resolve.extensions</code>是帮助 Webpack 解析扩展名的配置，默认值：<code>['.wasm', '.mjs', '.js', '.json']</code>，所以我们引入 js 和 json 文件，可以不写它们的扩展名，通常我们可以加上 <code>.css</code>、<code>.less</code>等，但是要确保同一个目录下面没有重名的 css 或者 js 文件，如果存在的话，还是写全路径吧。</p>
</div><div class="cl-preview-section"><pre class="  language-js"><code class="prism  language-js">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
    resolve<span class="token punctuation">:</span> <span class="token punctuation">{</span>
        extensions<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">'.js'</span><span class="token punctuation">,</span> <span class="token string">'.json'</span><span class="token punctuation">,</span> <span class="token string">'.css'</span><span class="token punctuation">]</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre>
</div><div class="cl-preview-section"><h3 id="resolve.alias">resolve.alias</h3>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;"><code>resolve.alias</code> 是最常用的配置，通过设置 alias 可以帮助 webpack 更快查找模块依赖，而且也能使我们编写代码更加方便。例如，我们在实际开发中经常会把源码都放到<code>src</code>文件夹，目录结构如下：</p>
</div><div class="cl-preview-section"><pre><code>src
├── lib
│   └── utils.js
└── pages
    └── demo
        └── index.js
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">在<code>src/pages/demo/index.js</code>中如果要引用<code>src/lib/utils.js</code>那么可以通过：<code>import utils from '../../lib/utils';</code> ，如果目录更深一些，会越来越难看，这是可以通过设置 alias 来缩短这种写法，例如：</p>
</div><div class="cl-preview-section"><pre class="  language-js"><code class="prism  language-js">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
    resolve<span class="token punctuation">:</span> <span class="token punctuation">{</span>
        alias<span class="token punctuation">:</span> <span class="token punctuation">{</span>
            src<span class="token punctuation">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">'src'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
            <span class="token string">'@lib'</span><span class="token punctuation">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">'src/lib'</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">经过设置了 alias，我们可以在任意文件中，不用理会目录结构，直接使用<code>require('@lib/utils')</code>或者<code>require('src/lib/utils')</code>来帮助 Webpack 定位模块。</p>
</div><div class="cl-preview-section"><blockquote>
<p style="font-size: 20px; line-height: 38px;">Tips：</p>
<ol>
<li style="font-size: 20px; line-height: 38px;">alias 的名字可以使用<code>@</code> <code>!</code> <code>~</code>等这些特殊字符，实际使用中 alias 都使用一种，或者不同类型使用一种，这样可以跟正常的模块引入区分开，增加辨识度；</li>
<li style="font-size: 20px; line-height: 38px;">使用<code>@</code>注意不要跟 npm 包的<a href="https://docs.npmjs.com/misc/scope">scope</a>冲突！</li>
<li style="font-size: 20px; line-height: 38px;">这时在 vscode 中会导致我们检测不到 utils 中的内容，不能帮我们快速编写代码，可以通过在项目根目录创建 jsconfig.json 来帮助我们定位：</li>
</ol>
</blockquote>
</div><div class="cl-preview-section"><pre class="  language-js"><code class="prism  language-js"><span class="token comment">//jsconfig.json</span>
<span class="token punctuation">{</span>
    <span class="token string">"compilerOptions"</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>
        <span class="token string">"baseUrl"</span><span class="token punctuation">:</span> <span class="token string">"./src"</span><span class="token punctuation">,</span>
        <span class="token string">"paths"</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>
            <span class="token string">"@lib/"</span><span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">"src/lib"</span><span class="token punctuation">]</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">alias 还常被用于给生产环境和开发环境配置不同的 lib 库，例如下面写法，在线下开发环境使用具有 debug 功能的 dev 版本 <a href="https://baidu.github.io/san/">San</a>：</p>
</div><div class="cl-preview-section"><pre class="  language-js"><code class="prism  language-js">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
    resolve<span class="token punctuation">:</span> <span class="token punctuation">{</span>
        alias<span class="token punctuation">:</span> <span class="token punctuation">{</span>
            san<span class="token punctuation">:</span> process<span class="token punctuation">.</span>env<span class="token punctuation">.</span>NODE_ENV <span class="token operator">===</span> <span class="token string">'production'</span> <span class="token operator">?</span> <span class="token string">'san/dist/san.min.js'</span> <span class="token punctuation">:</span> <span class="token string">'san/dist/san.dev.js'</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">alias 还支持在名称末尾添加<code>$</code>符号来缩小范围只命中以关键字结尾的导入语句，这样可以做精准匹配：</p>
</div><div class="cl-preview-section"><pre class="  language-js"><code class="prism  language-js">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
    resolve<span class="token punctuation">:</span> <span class="token punctuation">{</span>
        alias<span class="token punctuation">:</span> <span class="token punctuation">{</span>
            react$<span class="token punctuation">:</span> <span class="token string">'/path/to/react.min.js'</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre>
</div><div class="cl-preview-section"><pre class="  language-js"><code class="prism  language-js"><span class="token keyword">import</span> react <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span> <span class="token comment">// 精确匹配，所以 react.min.js 被解析和导入</span>
<span class="token keyword">import</span> file <span class="token keyword">from</span> <span class="token string">'react/file.js'</span><span class="token punctuation">;</span> <span class="token comment">// 非精确匹配，触发普通解析</span>
</code></pre>
</div><div class="cl-preview-section"><h3 id="resolve.mainfields">resolve.mainFields</h3>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">有一些我们用到的模块会针对不同宿主环境提供几份代码，例如提供 ES5 和 ES6 的两份代码，或者提供浏览器环境和 nodejs 环境两份代码，这时候在<code>package.json</code>文件里会做如下配置：</p>
</div><div class="cl-preview-section"><pre class="  language-json"><code class="prism  language-json"><span class="token punctuation">{</span>
    <span class="token string">"jsnext:main"</span><span class="token punctuation">:</span> <span class="token string">"es/index.js"</span><span class="token punctuation">,</span> <span class="token comment">//采用ES6语法的代码入口文件</span>
    <span class="token string">"main"</span><span class="token punctuation">:</span> <span class="token string">"lib/index.js"</span><span class="token punctuation">,</span> <span class="token comment">//采用ES5语法的代码入口文件，node</span>
    <span class="token string">"browser"</span><span class="token punctuation">:</span> <span class="token string">"lib/web.js"</span> <span class="token comment">//这个是专门给浏览器用的版本</span>
<span class="token punctuation">}</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">在 Webpack 中，会根据<code>resolve.mainFields</code>的设置去决定使用哪个版本的模块代码，在不同的<code>target</code>下对应的<code>resolve.mainFields</code>默认值不同，默认<code>target=web</code>对应的默认值为：</p>
</div><div class="cl-preview-section"><pre class="  language-js"><code class="prism  language-js">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
    resolve<span class="token punctuation">:</span> <span class="token punctuation">{</span>
        mainFields<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">'browser'</span><span class="token punctuation">,</span> <span class="token string">'module'</span><span class="token punctuation">,</span> <span class="token string">'main'</span><span class="token punctuation">]</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">所以在<code>target=web</code>打包时，会寻找<code>browser</code>版本的模块代码。</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">下面是不常用的或者比较简单的配置：</p>
</div><div class="cl-preview-section"><ul>
<li style="font-size: 20px; line-height: 38px;"><code>resolve.mainFiles</code>：解析目录时候的默认文件名，默认是<code>index</code>，即查找目录下面的<code>index</code>+<code>resolve.extensions</code>文件；</li>
<li style="font-size: 20px; line-height: 38px;"><code>resolve.modules</code>：查找模块依赖时，默认是<code>node_modules</code>；</li>
<li style="font-size: 20px; line-height: 38px;"><code>resolve.symlinks</code>：是否解析符合链接（软连接，<a href="https://zh.wikipedia.org/zh-cn/%E7%AC%A6%E5%8F%B7%E9%93%BE%E6%8E%A5">symlink</a>）；</li>
<li style="font-size: 20px; line-height: 38px;"><code>resolve.plugins</code>：添加解析插件，数组格式；</li>
<li style="font-size: 20px; line-height: 38px;"><code>resolve.cachePredicate</code>：是否缓存，支持 boolean 和 function，function 传入一个带有 path 和 require 的对象，必须返回 boolean 值。</li>
</ul>
</div><div class="cl-preview-section"><h2 id="module" style="font-size: 30px;">module</h2>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">在 webpack 解析模块的同时，不同的模块需要使用不同类型的模块处理器来处理，这部分的设置就在<code>module</code>配置中。module 有两个配置：<code>module.noParse</code>和<code>module.rules</code>，</p>
</div><div class="cl-preview-section"><h3 id="module.noparse">module.noParse</h3>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;"><code>module.noParse</code>配置项可以让 <strong>Webpack 忽略对部分没采用模块化的文件的递归解析和处理，这样做的好处是能提高构建性能</strong>，接收的类型为正则表达式，或者正则表达式数组或者接收模块路径参数的一个函数：</p>
</div><div class="cl-preview-section"><pre class="  language-js"><code class="prism  language-js">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
    module<span class="token punctuation">:</span> <span class="token punctuation">{</span>
        <span class="token comment">// 使用正则表达式</span>
        noParse<span class="token punctuation">:</span> <span class="token regex">/jquery|lodash/</span>

        <span class="token comment">// 使用函数，从 Webpack 3.0.0 开始支持</span>
        noParse<span class="token punctuation">:</span> <span class="token punctuation">(</span>content<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
            <span class="token comment">// content 代表一个模块的文件路径</span>
            <span class="token comment">// 返回 true or false</span>
            <span class="token keyword">return</span> <span class="token regex">/jquery|lodash/</span><span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>content<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre>
</div><div class="cl-preview-section"><blockquote>
<p style="font-size: 20px; line-height: 38px;">Tips：这里一定要确定被排除出去的模块代码中不能包含<code>import</code>、<code>require</code>、<code>define</code>等内容，以保证 webpack 的打包包含了所有的模块，不然会导致打包出来的 js 因为缺少模块而报错。</p>
</blockquote>
</div><div class="cl-preview-section"><h3 id="parser-来控制模块化语法">parser 来控制模块化语法</h3>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">因为webpack是以模块化的JavaScript文件为入口，所以内置了对模块化JavaScript的解析功能。支持AMD、Commonjs、SystemJs、ES6。parse属性可以更细粒度的配置哪些模块语法要解析，哪些不解析。简单来说，如果设置<code>parser.commonjs=false</code>，那么代码里面使用commonjs的<code>require</code>语法引入模块，对应的模块就不会被解析到依赖中，也不会被处理，支持的选项包括：</p>
</div><div class="cl-preview-section"><pre class="  language-js"><code class="prism  language-js">module<span class="token punctuation">:</span> <span class="token punctuation">{</span>
    rules<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
        test<span class="token punctuation">:</span> <span class="token regex">/\.js$/</span><span class="token punctuation">,</span>
        use<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">'babel-loader'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
        parser<span class="token punctuation">:</span> <span class="token punctuation">{</span>
            amd<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// 禁用 AMD</span>
            commonjs<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// 禁用 CommonJS</span>
            system<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// 禁用 SystemJS</span>
            harmony<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// 禁用 ES6 import/export</span>
            requireInclude<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// 禁用 require.include</span>
            requireEnsure<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// 禁用 require.ensure</span>
            requireContext<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// 禁用 require.context</span>
            browserify<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// 禁用 browserify</span>
            requireJs<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// 禁用 requirejs</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span>
</code></pre>
</div><div class="cl-preview-section"><blockquote>
<p style="font-size: 20px; line-height: 38px;">Tips：parser是语法层面的限制，noParse只能控制哪些文件不进行解析。</p>
</blockquote>
</div><div class="cl-preview-section"><h3 id="module.rules">module.rules</h3>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;"><code>module.rules</code>是在处理模块时，将符合规则条件的模块，提交给对应的处理器来处理，通常用来配置 loader，其类型是一个数组，数组里每一项都描述了如何去处理部分文件。每一项 rule 大致可以由以下三部分组成：</p>
</div><div class="cl-preview-section"><ol>
<li style="font-size: 20px; line-height: 38px;">条件匹配：通过<code>test</code>、<code>include</code>、<code>exclude</code>等配置来命中可以应用规则的模块文件；</li>
<li style="font-size: 20px; line-height: 38px;">应用规则：对匹配条件通过后的模块，使用<code>use</code>配置项来应用<code>loader</code>，可以应用一个 loader 或者按照<strong>从后往前的顺序</strong>应用一组 loader，当然我们还可以分别给对应 loader 传入不同参数；</li>
<li style="font-size: 20px; line-height: 38px;">重置顺序：一组 loader 的执行顺序默认是**从后到前（或者从右到左）**执行，通过<code>enforce</code>选项可以让其中一个 loader 的执行顺序放到最前（pre）或者是最后（post）。</li>
</ol>
</div><div class="cl-preview-section"><h3 id="条件匹配">条件匹配</h3>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">如上所述，条件匹配相关的配置有<code>test</code>、<code>include</code>、<code>exclude</code>、<code>resource</code>、<code>resourceQuery</code>和<code>issuer</code>。条件匹配的对象包括三类：<code>resource</code>，<code>resourceQuery</code>和<code>issuer</code>。</p>
</div><div class="cl-preview-section"><ul>
<li style="font-size: 20px; line-height: 38px;">resource：请求文件的绝对路径。它已经根据 resolve 规则解析；</li>
<li style="font-size: 20px; line-height: 38px;">issuer: 被请求资源（requested the resource）的模块文件的绝对路径，即导入时的位置。</li>
</ul>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">举例来说明：从 <code>app.js</code> 导入 <code>'./style.css?inline'</code>：</p>
</div><div class="cl-preview-section"><ul>
<li style="font-size: 20px; line-height: 38px;"><code>resource</code> 是<code>/path/to/style.css</code>；</li>
<li style="font-size: 20px; line-height: 38px;"><code>resourceQuery</code> 是<code>?</code>之后的<code>inline</code>；</li>
<li style="font-size: 20px; line-height: 38px;"><code>issuer</code> 是<code>/path/to/app.js</code>。</li>
</ul>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">来看下 rule 对应的配置与匹配的对象关系表：</p>
</div><div class="cl-preview-section"><div class="table-wrapper"><table>
<thead>
<tr>
<th>rule 配置项</th>
<th>匹配的对象</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>test</code></td>
<td><code>resource</code>类型</td>
</tr>
<tr>
<td><code>include</code></td>
<td><code>resource</code>类型</td>
</tr>
<tr>
<td><code>exclude</code></td>
<td><code>resource</code>类型</td>
</tr>
<tr>
<td><code>resource</code></td>
<td><code>resource</code>类型</td>
</tr>
<tr>
<td><code>resourceQuery</code></td>
<td><code>resourceQuery</code>类型</td>
</tr>
<tr>
<td><code>issuer</code></td>
<td><code>issuer</code>类型</td>
</tr>
</tbody>
</table>
</div></div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">举例说明，下面rule 的配置项，匹配的条件为：来自<code>src</code>和<code>test</code>文件夹，不包含<code>node_modules</code>和<code>bower_modules</code>子目录，模块的文件路径为<code>.tsx</code>和<code>.jsx</code>结尾的文件。</p>
</div><div class="cl-preview-section"><pre class="  language-js"><code class="prism  language-js"><span class="token punctuation">{</span>
    test<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token regex">/\.jsx?$/</span><span class="token punctuation">,</span> <span class="token operator">/</span>\<span class="token punctuation">.</span>tsx<span class="token operator">?</span>$<span class="token operator">/</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    include<span class="token punctuation">:</span> <span class="token punctuation">[</span>
        path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">'src'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
        path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">'test'</span><span class="token punctuation">)</span>
    <span class="token punctuation">]</span><span class="token punctuation">,</span>
    exclude<span class="token punctuation">:</span> <span class="token punctuation">[</span>
        path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">'node_modules'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
        path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">'bower_modules'</span><span class="token punctuation">)</span>
    <span class="token punctuation">]</span>
<span class="token punctuation">}</span>
</code></pre>
</div><div class="cl-preview-section"><h3 id="loader-配置"><code>Loader</code> 配置</h3>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;"><code>loader</code>是解析处理器，通过<code>loader</code>我们可以将 ES6 语法的 js 转化成 ES5 的语法，可以将图片转成 base64 的<code>dataURL</code>，在 JavaScript 文件中直接<code>import</code> css 和 html 也是通过对应的<code>loader</code>来实现的。</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">我们在使用对应的<code>loader</code>之前，需要先安装它，例如，我们要在 JavaScript 中引入 less，则需要安装<code>less-loader</code>：</p>
</div><div class="cl-preview-section"><pre class="  language-sh"><code class="prism  language-sh">npm i -D less-loader
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">然后在<code>module.rules</code>中指定<code>*.less</code>文件都是用<code>less-loader</code>：</p>
</div><div class="cl-preview-section"><pre class="  language-js"><code class="prism  language-js">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
    module<span class="token punctuation">:</span><span class="token punctuation">{</span>
        rules<span class="token punctuation">:</span><span class="token punctuation">[</span>
            test<span class="token punctuation">:</span> <span class="token regex">/\.less$/</span><span class="token punctuation">,</span> use<span class="token punctuation">:</span><span class="token string">'less-loader'</span>
        <span class="token punctuation">]</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">简单来理解上面的配置，<code>test</code>项使用 <code>/\.less$/</code>正则匹配需要处理的模块文件（即 less 后缀的文件），然后交给<code>less-loader</code>来处理，这里的<code>less-loader</code>是个 string，最终会被作为<code>require()</code>的参数来直接使用。</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">这样 less 文件都会被<code>less-loader</code>处理成对应的 css 文件。</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">除了直接在<code>webpack.config.js</code>是用 loader 的方式之外，还可以在对应的 JavaScript 文件中是用 loader：</p>
</div><div class="cl-preview-section"><pre class="  language-js"><code class="prism  language-js"><span class="token keyword">const</span> html <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'html-loader!./loader.html'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>html<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">上面的代码，实际是将<code>loader.html</code>的内容转化成 string 变量，直接给输出了，等同于：</p>
</div><div class="cl-preview-section"><pre class="  language-js"><code class="prism  language-js"><span class="token keyword">const</span> html <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'./loader.html'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>html<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">加上下面配置的效果：</p>
</div><div class="cl-preview-section"><pre class="  language-js"><code class="prism  language-js">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
    module<span class="token punctuation">:</span> <span class="token punctuation">{</span>
        rules<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>test<span class="token punctuation">:</span> <span class="token regex">/\.html$/</span><span class="token punctuation">,</span> use<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">'html-loader'</span><span class="token punctuation">]</span><span class="token punctuation">}</span><span class="token punctuation">]</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">如果没有 html-loader，直接<code>require</code>一个 html 文件，会被当初 js 模块来执行，则会报错：<br>
<img src="http://img.mukewang.com/5cd8dda60001da9f07000358.jpg" alt="图片描述" data-original="http://img.mukewang.com/5cd8dda60001da9f07000358.jpg" class="" style="cursor: pointer;"></p>
</div><div class="cl-preview-section"><blockquote>
<p style="font-size: 20px; line-height: 38px;">Tips：<code>require('html-loader!./loader.html')</code>中<code>!</code>类似 Unix 系统中命令行的管道，这里<code>!</code>隔开的命令是<strong>从右到左解析的</strong>，即先加载<code>loader.html</code>然后在将加载的文件内容传给<code>html-loader</code>处理。</p>
</blockquote>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">综上，loader 有两种配置方式：</p>
</div><div class="cl-preview-section"><ol>
<li style="font-size: 20px; line-height: 38px;">使用 webpack.config.js 的配置方式：</li>
</ol>
</div><div class="cl-preview-section"><pre class="  language-js"><code class="prism  language-js">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
    module<span class="token punctuation">:</span> <span class="token punctuation">{</span>
        rules<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>test<span class="token punctuation">:</span> <span class="token regex">/\.html$/</span><span class="token punctuation">,</span> use<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">'html-loader'</span><span class="token punctuation">]</span><span class="token punctuation">}</span><span class="token punctuation">]</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre>
</div><div class="cl-preview-section"><ol start="2">
<li style="font-size: 20px; line-height: 38px;">在 JavaScript 文件内使用内联配置方式：</li>
</ol>
</div><div class="cl-preview-section"><pre class="  language-js"><code class="prism  language-js"><span class="token keyword">const</span> html <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'html-loader!./loader.html'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// or</span>
<span class="token keyword">import</span> html <span class="token keyword">from</span> <span class="token string">'html-loader!./loader.html'</span><span class="token punctuation">;</span>
</code></pre>
</div><div class="cl-preview-section"><blockquote>
<p style="font-size: 20px; line-height: 38px;">Tips：use 中传递字符串（如：<code>use: ['style-loader']</code>）是 loader 属性的简写方式（如：<code>use: [{loader: 'style-loader'}]</code>）</p>
</blockquote>
</div><div class="cl-preview-section"><h4 id="loader-的参数" style="font-size: 26px;">Loader 的参数</h4>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">给 loader 传参的方式有两种：</p>
</div><div class="cl-preview-section"><ol>
<li style="font-size: 20px; line-height: 38px;">通过<code>options</code>传入</li>
<li style="font-size: 20px; line-height: 38px;">通过<code>query</code>的方式传入：</li>
</ol>
</div><div class="cl-preview-section"><pre class="  language-js"><code class="prism  language-js"><span class="token comment">// inline内联写法，通过 query 传入</span>
<span class="token keyword">const</span> html <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"html-loader?attrs[]=img:src&amp;attrs[]=img:data-src!./file.html"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// config内写法，通过 options 传入</span>
module<span class="token punctuation">:</span> <span class="token punctuation">{</span>
    rules<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
        test<span class="token punctuation">:</span> <span class="token regex">/\.html$/</span><span class="token punctuation">,</span>
        use<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
            loader<span class="token punctuation">:</span> <span class="token string">'html-loader'</span><span class="token punctuation">,</span>
            options<span class="token punctuation">:</span> <span class="token punctuation">{</span>
                minimize<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
                removeComments<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
                collapseWhitespace<span class="token punctuation">:</span> <span class="token boolean">false</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span><span class="token punctuation">]</span>
    <span class="token punctuation">}</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span>
<span class="token comment">// config内写法，通过 query 传入</span>
module<span class="token punctuation">:</span> <span class="token punctuation">{</span>
    rules<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
      test<span class="token punctuation">:</span> <span class="token regex">/\.html$/</span><span class="token punctuation">,</span>
      use<span class="token punctuation">:</span> <span class="token punctuation">[</span> <span class="token punctuation">{</span>
        loader<span class="token punctuation">:</span> <span class="token string">'html-loader?minimize=true&amp;removeComments=false&amp;collapseWhitespace=false'</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">]</span>
    <span class="token punctuation">}</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span>
</code></pre>
</div><div class="cl-preview-section"><h4 id="loader-的解析顺序" style="font-size: 26px;">Loader 的解析顺序</h4>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">对于一些类型的模块，简单配置一个 loader 是不能够满足需求的，例如 less 模块类型的文件，只配置了 less-loader 仅仅是将 Less 语法转换成了 CSS 语法，但是 JS 还是不能直接使用，所以还需要添加<code>css-loader</code>来处理，这时候就需要注意 Loader 的解析顺序了。前面已经提到了，Webpack 的 Loader 解析顺序是从右到左（从后到前）的，即：</p>
</div><div class="cl-preview-section"><pre class="  language-js"><code class="prism  language-js"><span class="token comment">// query 写法从右到左，使用!隔开</span>
<span class="token keyword">const</span> styles <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'css-loader!less-loader!./src/index.less'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 数组写法，从后到前</span>
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
    module<span class="token punctuation">:</span> <span class="token punctuation">{</span>
        rules<span class="token punctuation">:</span> <span class="token punctuation">[</span>
            <span class="token punctuation">{</span>
                test<span class="token punctuation">:</span> <span class="token regex">/\.less$/</span><span class="token punctuation">,</span>
                use<span class="token punctuation">:</span> <span class="token punctuation">[</span>
                    <span class="token punctuation">{</span>
                        loader<span class="token punctuation">:</span> <span class="token string">'style-loader'</span>
                    <span class="token punctuation">}</span><span class="token punctuation">,</span>
                    <span class="token punctuation">{</span>
                        loader<span class="token punctuation">:</span> <span class="token string">'css-loader'</span>
                    <span class="token punctuation">}</span><span class="token punctuation">,</span>
                    <span class="token punctuation">{</span>
                        loader<span class="token punctuation">:</span> <span class="token string">'less-loader'</span>
                    <span class="token punctuation">}</span>
                <span class="token punctuation">]</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">]</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">如果需要调整 Loader 的执行顺序，可以使用<code>enforce</code>，<code>enforce</code>取值是<code>pre|post</code>，<code>pre</code>表示把放到最前，<code>post</code>是放到最后：</p>
</div><div class="cl-preview-section"><pre class="  language-js"><code class="prism  language-js">use<span class="token punctuation">:</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span>
        loader<span class="token punctuation">:</span> <span class="token string">'babel-loader'</span><span class="token punctuation">,</span>
        options<span class="token punctuation">:</span> <span class="token punctuation">{</span>
            cacheDirectory<span class="token punctuation">:</span> <span class="token boolean">true</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token comment">// enforce:'post' 的含义是把该 loader 的执行顺序放到最后</span>
        <span class="token comment">// enforce 的值还可以是 pre，代表把 loader 的执行顺序放到最前</span>
        enforce<span class="token punctuation">:</span> <span class="token string">'post'</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">]</span><span class="token punctuation">;</span>
</code></pre>
</div><div class="cl-preview-section"><h4 id="oneof：只应用第一个匹配的规则" style="font-size: 26px;">oneOf：只应用第一个匹配的规则</h4>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;"><code>oneOf</code>表示对该资源只应用第一个匹配的规则，一般结合<code>resourceQuery</code>，具体代码来解释：</p>
</div><div class="cl-preview-section"><pre class="  language-js"><code class="prism  language-js">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
    <span class="token comment">//...</span>
    module<span class="token punctuation">:</span> <span class="token punctuation">{</span>
        rules<span class="token punctuation">:</span> <span class="token punctuation">[</span>
            <span class="token punctuation">{</span>
                test<span class="token punctuation">:</span> <span class="token regex">/\.css$/</span><span class="token punctuation">,</span>
                oneOf<span class="token punctuation">:</span> <span class="token punctuation">[</span>
                    <span class="token punctuation">{</span>
                        resourceQuery<span class="token punctuation">:</span> <span class="token regex">/inline/</span><span class="token punctuation">,</span> <span class="token comment">// foo.css?inline</span>
                        use<span class="token punctuation">:</span> <span class="token string">'url-loader'</span>
                    <span class="token punctuation">}</span><span class="token punctuation">,</span>
                    <span class="token punctuation">{</span>
                        resourceQuery<span class="token punctuation">:</span> <span class="token regex">/external/</span><span class="token punctuation">,</span> <span class="token comment">// foo.css?external</span>
                        use<span class="token punctuation">:</span> <span class="token string">'file-loader'</span>
                    <span class="token punctuation">}</span>
                <span class="token punctuation">]</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">]</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre>
</div><div class="cl-preview-section"><h3 id="plugin-插件"><code>plugin</code> 插件</h3>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;"><code>plugin</code>是 Webpack 的重要组成部分，通过<code>plugin</code>可以解决<code>loader</code>解决不了的问题。Webpack 本身就是有很多插件组成的，所以内置了很多插件，我们可以直接通过<code>webpack</code>对象的属性来直接使用，例如：<code>webpack.optimize.UglifyJsPlugin</code></p>
</div><div class="cl-preview-section"><pre class="  language-js"><code class="prism  language-js">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
    <span class="token comment">//....</span>
    plugins<span class="token punctuation">:</span> <span class="token punctuation">[</span>
        <span class="token comment">// 压缩js</span>
        <span class="token keyword">new</span> <span class="token class-name">webpack<span class="token punctuation">.</span>optimize<span class="token punctuation">.</span>UglifyJsPlugin</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">]</span>
<span class="token punctuation">}</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">除了内置的插件，我们也可以通过 NPM 包的方式来使用插件：</p>
</div><div class="cl-preview-section"><pre class="  language-js"><code class="prism  language-js"><span class="token comment">// 非默认的插件</span>
<span class="token keyword">const</span> ExtractTextPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'extract-text-webpack-plugin'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
    <span class="token comment">//....</span>
    plugins<span class="token punctuation">:</span> <span class="token punctuation">[</span>
        <span class="token comment">// 导出css文件到单独的内容</span>
        <span class="token keyword">new</span> <span class="token class-name">ExtractTextPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
            filename<span class="token punctuation">:</span> <span class="token string">'style.css'</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre>
</div><div class="cl-preview-section"><blockquote>
<p style="font-size: 20px; line-height: 38px;">Tips：<code>loader</code>面向的是解决某个或者某类模块的问题，而<code>plugin</code>面向的是项目整体，解决的是<code>loader</code>解决不了的问题。</p>
</blockquote>
</div><div class="cl-preview-section"><div class="summary"><h5 class="centertitle" style="font-size: 20px; line-height: 38px;">小结 </h5></div><!--title:&#23567;&#32467; -->
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">在本小节中，我们讲解了Webpack 相关的除<code>entry</code>和<code>output</code>外的基础配置项，这里总结下项目经常配置的并且比较重要的配置项列表，供大家复习本小节内容：</p>
</div><div class="cl-preview-section"><ul>
<li style="font-size: 20px; line-height: 38px;"><code>resolve</code>：模块依赖查找相关的配置
<ul>
<li style="font-size: 20px; line-height: 38px;"><code>resolve.extensions</code>：可以省略解析扩展名的配置，配置太多反而会导致webpack 解析效率下降；</li>
<li style="font-size: 20px; line-height: 38px;"><code>resolve.alias</code>：通过设置 alias 可以帮助 webpack 更快查找模块依赖，精简代码书写时相对路径的书写；</li>
</ul>
</li>
<li style="font-size: 20px; line-height: 38px;"><code>module.rules</code>：loader 相关的配置，每个 rule 重要的内容有：
<ul>
<li style="font-size: 20px; line-height: 38px;"><code>test</code>：正则匹配需要处理的模块文件；</li>
<li style="font-size: 20px; line-height: 38px;"><code>use</code>：loader 数组配置，内部有<code>loader</code>和<code>options</code>；</li>
<li style="font-size: 20px; line-height: 38px;"><code>include</code>：包含；</li>
<li style="font-size: 20px; line-height: 38px;"><code>exclude</code>：排除；</li>
</ul>
</li>
<li style="font-size: 20px; line-height: 38px;"><code>plugins</code>：插件。</li>
</ul>
</div><div class="cl-preview-section"><blockquote>
<p style="font-size: 20px; line-height: 38px;">本小节 Webpack 相关面试题：</p>
<ol>
<li style="font-size: 20px; line-height: 38px;">能不能手写一个 Webpack 配置？记住重点配置项：<code>entry</code>、<code>output</code>、<code>module.rules</code>（loader）和<code>plugin</code>。</li>
<li style="font-size: 20px; line-height: 38px;">在 JS  文件中怎么调用 Loader 来处理一个模块？</li>
<li style="font-size: 20px; line-height: 38px;">Loader 的解析顺序是怎样的？</li>
</ol>
</blockquote>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">专栏代码已经整理好给大家共享出来：<br>
<a href="https://github.com/ksky521/webpack-tutorial">https://github.com/ksky521/webpack-tutorial</a></p>
</div></div>
            </div>
                            <!-- 买过的阅读 -->
                <div class="art-next-prev clearfix">
                                                                        <!-- 已买且开放 或者可以试读 -->
                            <a href="/read/29/article/263">
                                                    <div class="prev l clearfix">
                                <div class="icon l">
                                    <i class="imv2-arrow3_l"></i>
                                </div>
                                <p>
                                    05 基础概念和常见配置项介绍（一）
                                </p>
                            </div>
                        </a>
                                                                                            <!-- 已买且开放 或者可以试读 -->
                            <a href="/read/29/article/265">
                                                    <div class="next r clearfix">
                                <p>
                                    07 Webpack 中的模块化开发
                                </p>
                                <div class="icon r">
                                    <i class="imv2-arrow3_r"></i>
                                </div>

                            </div>
                        </a>
                                    </div>
                    </div>
        <div class="comments-con js-comments-con" id="coments_con">
        </div>



    </div>
    
    
    

</div>
 
<!-- 专栏介绍页专栏评价 -->

<!-- 专栏介绍页底部三条评价 -->

<!-- 专栏阅读页弹层目录和介绍页页面目录 -->

<!-- 专栏阅读页发布回复 -->

<!-- 专栏阅读页发布评论 -->

<!-- 专栏阅读页底部评论 -->

<!-- 专栏阅读 单个 评论 -->

<!-- 新增回复和展开三条以外回复 -->

<!-- 立即订阅的弹窗 -->












</div></body></html>